
<template>
  <view class="detail-page">
    <!-- 笔记区 -->
    <view class="note-area">
      <!-- 笔记内容 -->
	  <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
	  	<swiper-item>
	  		<view class="swiper-item">
				<image class='img-swiper' src="../../static/love.png" mode="aspectFit"></image>
			</view>
	  	</swiper-item>

	  </swiper>
      <scroll-view scroll-y=true class="note-content">
        <text>{{ noteContent }}</text>
      </scroll-view>
      <!-- 点赞按钮 -->
	  <view class="function">
      <view class="like-button" @click="toggleLike">
        <image :src="love" style="width: 40rpx; height: 40rpx;"></image>
        <text>{{ likeCount }}</text>
      </view>
	  <view class="like-button" @click="toggleStore">
	    <image :src="store" style="width: 40rpx; height: 40rpx;"></image>
	    <text>{{ storeCount }}</text>
	  </view>
	  </view>
    </view>

    <!-- 评论区 -->
    <view class="comment-area">
      <!-- 评论列表 -->
	  <view class="sub-comment">
      <scroll-view scroll-y=true class="comment-list">
        <view v-for="(item, index) in comments" :key="index" class="comment-item">
          <comment :comment="item"></comment>
        </view>
      </scroll-view>
      
      <!-- 评论输入框 -->
      <view class="comment-input">
        <input v-model="newComment" placeholder="发表评论"></input>
        <button @click="addComment">发送</button>
      </view>
	  </view>
    </view>
  </view>
</template>

<script>
import  Comment from"../../components/comment/comment.vue"
export default {
	components:{
		Comment
	},
  data() {
    return {
	  love:'../../static/love.png',
	  store:'../../static/store.png',
      noteContent: '这是一篇笔记的内容',
      likeIcon: 'like.png',
	  storeCount:20,
      likeCount: 10,
		  comments: [{
			avatar:'../../static/logo.png',
			nickname: '评论者昵称',
			content: '评论内容',
			time: '评论时间'},
			{avatar:'../../static/love.png',
			  nickname: '评论者昵称2',
			  content: '评论内容2',
			  time: '评论时间2'},
			  {avatar:'../../static/love.png',
				nickname: '评论者昵称3',
				content: '评论内容3',
				time: '评论时间3'},
			
			],
		pic:["../../static/love.png"],
		
      newComment: '',
	 
    };
  },

  methods: {
    toggleLike() {
		if(this.love=="../../static/love.png")
		{
         this.love="../../static/chooselove.png";
		 this.likeCount++;
		 }
		 else
		 {
		 this.love="../../static/love.png";
		 this.likeCount--;
		 }
    },
	toggleStore(){

		 if(this.store=="../../static/store.png")
		 {
		  this.store="../../static/choosestore.png";
		  this.storeCount++;
		  }
		  else
		  {
		  this.store="../../static/store.png";
		  this.storeCount--;
		  }
	},
    addComment() {
      if (this.newComment) {
        this.comments.push(this.newComment);
        this.newComment = '';
      }
    },
  },
};
</script>

<style>
.detail-page {
  padding: 20rpx;
  height: 100%;
}

.note-area {
  margin-bottom: 20rpx;
  height: 800rpx;
}

.note-content {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
  height: 400rpx;
}
.function{
	display: flex;
}
.like-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  padding: 10rpx;
  border-radius: 10rpx;
  width: 80rpx;
}

.like-button image {
  width: 20rpx;
  height: 20rpx;
  margin-right: 5rpx;
}

.comment-area {
  margin-bottom: 0rpx;
  height:1000rpx;
}
.sub-comment{
	padding-bottom: 0%;
}
.comment-list {
  background-color: #f5f5f5;
  padding: 10rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
  height:800rpx;
}

.comment-item {
  margin-bottom: 5rpx;
}

.comment-input {
  display: flex;
  align-items: center;
  height:200rpx;
}

.comment-input input {

  background-color: #f5f5f5;
  padding: 10rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
  margin-left: 50rpx;
}

.comment-input button {
height:70rpx;
width: 120rpx;
font-size: 30rpx;
  background-color: #2d8cf0;
  color: #ffffff;
  border-radius: 10rpx;
}
.swiper-item{
	height:400rpx;
	background-color: white;
}
	
.img-swiper{
	height:100rpx;
	width: 200rpx;
}
</style>